<script setup>
  import { ref } from 'vue'
  // 组件 ref
  const formRef = ref()

  //兼容小程序样式
  defineOptions({
    options: {
      styleIsolation: 'shared',
    },
  })

  const userInfo = ref({
    mobile: '17635678231',
    password: '123456aa',
    info: '还没有添加描述信息呢~',
  })
  // 表单验证规则
  const formRules = {
    mobile: {
      rules: [
        { required: true, errorMessage: '请填写手机号码' },
        { pattern: '^[1][3-8][0-9]{9}$', errorMessage: '手机号码格式不正确' },
      ],
    },
    password: {
      rules: [
        { required: true, errorMessage: '请输入密码' },
        { pattern: '^[a-zA-Z0-9]{8}$', errorMessage: '密码格式不正确' },
      ],
    },
  }
  // 表单提交
  async function onFormSubmit() {
    try {
      // 执行表单的验证
      await formRef.value.validate()
    } catch (error) {
      console.log(error)
    }
  }
</script>

<template>
  <uni-forms label-width="0" ref="formRef" :model="userInfo" :rules="formRules">
    <uni-forms-item name="mobile">
      <uni-easyinput
        type="text"
        :clearable="false"
        placeholder="请输入手机号"
        v-model="userInfo.mobile"
      />
    </uni-forms-item>
    <uni-forms-item name="password">
      <uni-easyinput
        type="password"
        :clearable="false"
        placeholder="请输入密码"
        v-model="userInfo.password"
      />
    </uni-forms-item>
    <uni-forms-item>
      <uni-easyinput
        type="textarea"
        :clearable="false"
        v-model="userInfo.info"
      />
    </uni-forms-item>
  </uni-forms>
  <button type="primary" @click="onFormSubmit">提交</button>
  <view class="custom-tabs">
    <view class="custom-tabs-bar active">
      <text class="tabbar-text">关注</text>
    </view>
    <view class="custom-tabs-bar">
      <text class="tabbar-text">推荐</text>
    </view>
    <view class="custom-tabs-bar">
      <text class="tabbar-text">护肤</text>
    </view>
    <view class="custom-tabs-bar">
      <text class="tabbar-text">减脂</text>
    </view>
    <view class="custom-tabs-bar">
      <text class="tabbar-text">饮食</text>
    </view>
    <view class="custom-tabs-cursor"></view>
  </view>
</template>

<style lang="scss">
  // 自定义tabbar
  .custom-tabs {
    display: flex;
    position: relative;
    padding: 0 30rpx;
  }

  .custom-tabs-bar {
    height: 80rpx;
    line-height: 80rpx;
    color: #979797;
    padding-right: 30rpx;
    position: relative;

    &.active {
      color: #121826;
      font-weight: 500;
    }
  }

  .tabbar-text {
    font-size: 30rpx;
  }

  .custom-tabs-cursor {
    position: absolute;
    bottom: 3px;
    left: 20px;

    width: 20px;
    height: 2px;
    border-radius: 2px;
    background-color: #2cb5a5;
    transition: all 0.3s ease-out;
  }
  .uni-forms {
    margin: 20px;
  }

  // ::v-deep  修改组件内部样式：H5 端的写法  //兼容哈
  ::v-deep .uni-easyinput__content-input {
    border: 1px solid red;
    padding: 10px;
  }
  ::v-deep .uni-easyinput__content-textarea {
    background-color: #5e5955;
  }
  .uni-easyinput__content {
    color: #ffaa7f;
  }
</style>
